<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/google-map/google-map.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">

<script rel="import" src="SubTileZoomMapType.js"></script>

<link rel="import" href="../forest_controls/forest-controls.html">
<link rel="import" href="../forest_layer_panel/forest-layer-panel.html">
<link rel="import" href="../forest_legend/forest-legend.html">
<link rel="import" href="../forest_search_panel/forest-search-panel.html">

<dom-module id="forest-map">
  <style>
    google-map {
      @apply(--layout-fit);
    }

    forest-legend,
    forest-controls,
    forest-layer-panel,
    forest-search-panel {
      position: absolute;
      left: 0px;
      border-radius: 0 2px 0 2px;
    }

    forest-controls,
    forest-layer-panel,
    forest-search-panel {
      top: 100px;
    }

    forest-legend {
      bottom: 50px;
    }

    :host[narrow-viewport] forest-controls {
      display: none;
    }

    .side-drawer ::content .content {
      padding: 20px;
      padding-top: 10px;
    }

    .side-drawer ::content .header {
      padding-top: 10px;
      padding-left: 5px;
    }
  </style>
  <template>
    <google-map map="{{gMap_}}"
                latitude="{{lat_}}"
                longitude="{{lon_}}"
                zoom="{{zoom_}}"
                map-type="{{baseLayerId_}}"
                on-google-map-ready="handleGoogleMapReady_">
    </google-map>

    <forest-controls
        on-search-tap="openSearchPanel_"
        on-layers-tap="openLayersPanel_">
    </forest-controls>
    <forest-layer-panel
        class="side-drawer"
        selected-forest-layer="{{forestLayer_}}"
        selected-base-layer-id="{{baseLayerId_}}">>
    </forest-layer-panel>
    <forest-search-panel class="side-drawer" on-result-selected="handleSearchDone_">
    </forest-search-panel>

    <forest-legend forest-layer="[[forestLayer_]]"></forest-legend>
  </template>
  <script src="forest-map.js"></script>
</dom-module>
